 <template>
  <div class="index-box" ref="index">
      <el-row :gutter="10">
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <div  class="head">
             <span class="back" @click="back" style="color:#61997A;margin-right: 10px;cursor: pointer;"><i class="el-icon-back"></i>返回</span> <span>手机号为</span><span class="red">{{phone}}</span><span>的推广交易明细</span>
          </div>
          <div class="moneyTotal" ref="moneyTotal">
              <div class="item">
                <div class="money">{{topData.orderNums}}</div>
                <div class="text">推广交易总订单数(单)</div>
              </div>
              <div class="item">
                <div class="money">¥{{topData.actualPayPrice}}</div>
                <div class="text">实付款总金额(元)</div>
              </div>
              <div class="item">
                <div class="money">￥{{topData.royaltyTotalAmount}}</div>
                <div class="text">交易提成总金额(元)</div>
              </div>

          </div>
          <div class="search" ref="search">
            <el-form :inline="true" :model="searchForm" size="small" ref="searchForm" @submit.native.prevent
              class="demo-form-inline" id="searchBox">
              <el-form-item prop="orderNo">
                  <el-input v-model="searchForm.orderNo" clearable placeholder="订单号"></el-input>
              </el-form-item>
              <el-form-item prop="telephone">
                  <el-input v-model="searchForm.telephone" clearable placeholder="购买人手机号"></el-input>
              </el-form-item>
              <el-form-item prop="orederSource">
                 <el-select v-model="searchForm.orederSource" clearable>
                    <el-option value="1">微信</el-option>
                    <el-option value="2">安卓</el-option>
                    <el-option value="3">苹果</el-option>
                 </el-select>
              </el-form-item>

              <el-form-item prop="a">
                  <el-select
                    v-model="searchForm.a"
                    placeholder="订单类型"
                    clearable
                    size="small"
                  >
                    <el-option :label="item.dictLabel" :value="item.dictValue" v-for="item in orderTypeList"></el-option>
                  </el-select>
              </el-form-item>
              <el-form-item prop="storeName">
                  <el-input v-model="searchForm.storeName" clearable placeholder="商家名称"></el-input>
              </el-form-item>
              <el-form-item prop="time">
                <el-date-picker v-model="time" type="daterange" align="right" unlink-panels range-separator="至"
                  start-placeholder="结算开始日期" end-placeholder="结算结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                  :picker-options="pickerOptions">
                </el-date-picker>
              </el-form-item>

              <el-form-item class="clearfix">
                <el-button type="primary" @click="handleSearch()" icon="el-icon-search">搜索</el-button>
                <el-button icon="el-icon-refresh" size="small" @click="resetSearch()">重置</el-button>
              </el-form-item>
              <div class="actionBtnRight" style="margin-left:auto">
                  <MyRefresh></MyRefresh>
                  <MyTableColumnSet :tableColumn.sync="tableColumn" :hideTableColumn.sync="hideTableColumn" :tableColumnType.sync="tableColumnType"></MyTableColumnSet>
              </div>
            </el-form>
          </div>
          <div class="table" ref="table">
            <el-table :data="dataList" style="width: 100%" row-key="id" border :height="tableHeight" v-loading="loading" stripe>

              <el-table-column prop="name" label="购买人头像" v-if="!hideTableColumn.includes('img')" align="center">
                <template #default="scope">
                   <el-image :src="scope.row.userface" fit="fill" v-image-preview="scope.row.userface" class="img"></el-image>
                </template>
              </el-table-column>
              <el-table-column prop="telephone" label="购买人手机号" v-if="!hideTableColumn.includes('phone')" align="center"></el-table-column>
              <el-table-column prop="storeName" label="商家名称" v-if="!hideTableColumn.includes('name')" align="center"></el-table-column>
              <el-table-column prop="orederSource" label="应用端来源" v-if="!hideTableColumn.includes('type')" align="center">
                <template #default="scope">
                  <span v-if="scope.row.orederSource=='1'">微信</span>
                  <span v-else-if="scope.row.orederSource=='2'">安卓</span>
                  <span v-else-if="scope.row.orederSource=='3'">苹果</span>
                </template>
              </el-table-column>
              <el-table-column prop="orderNo" label="订单号" v-if="!hideTableColumn.includes('orderNumber')" align="center"></el-table-column>
              <el-table-column prop="orderTypeName" label="订单来源" v-if="!hideTableColumn.includes('orderSource')" align="center"></el-table-column>
              <el-table-column prop="goodsNum" label="商品总数量(件)" v-if="!hideTableColumn.includes('shopTotalNumber')" align="center"></el-table-column>
              <el-table-column prop="goodsTotalPrice" label="商品合计金额(元)" v-if="!hideTableColumn.includes('shopTotalMoney')" align="center"></el-table-column>
              <el-table-column prop="actualPayPrice" label="实付款金额(元)" v-if="!hideTableColumn.includes('money')" align="center"></el-table-column>
              <el-table-column prop="royaltyAmount" label="提成金额(元)" v-if="!hideTableColumn.includes('newMoney')" align="center"></el-table-column>
            </el-table>
          </div>
          <div class="page" ref="page">
           <MyPagination
              :total="total"
              :page.sync="searchForm.pageNum"
              :limit.sync="searchForm.pageSize"
              @pagination="dataInfo"
            />
          </div>
        </el-col>
      </el-row>
  </div>
</template>

<script>
  import common from '@/api/api';
  import {
    promotionTransactionItemList,promotionTransactionItemQuantity
  } from '@/api/getData'
  import option from '../../common/option.js';

  export default {
    data() {
      return {
        loading: false,
        btnLoading:false,
        options: [],
        phone:'',
        time:'',
        searchForm: {
         customerId:"",

         telephone:'',
         orderNo:'',
         orederSource:'',
         orderType:'',
         storeName:'',
         pageNum: 1,
         pageSize: 20,
        },
        tableColumn:[{/*自定义表格列*/
            name:'序号',
            value:'number'
        },{
            name:'购买人头像',
            value:'img'
        },{
            name:'购买人手机号',
            value:'phone'
        },{
            name:'商品人名称',
            value:'name'
        },{
            name:'应用端来源',
            value:'type'
        },{
            name:'订单号',
            value:'orderNumber'
        },{
            name:'订单来源',
            value:'orderSource'
        },{
            name:'商品总数量(件)',
            value:'shopTotalNumber'
        },{
            name:'商品合计金额(元)',
            value:'shopTotalMoney'
        },{
            name:'实付款金额(元)',
            value:'money'
        },{
            name:'提成金额(元)',
            value:'newMoney'
        }],
        hideTableColumn:[],/*自定义表格列需要隐藏的*/
        tableColumnType:'staffManagement',/*自定义表格列类型传参*/
        tableHeight:0,//table 高度
        topData:{},
        dataList:[],
        total: 0,
        orderTypeList:[]
      }
    },
    computed: {
      pickerOptions: () => {
        return option.pickerOptions;
      }
    },
    created() {

    },
    mounted() {
      this.phone = this.$route.query.phone;
      this.searchForm.customerId = this.$route.query.customerId;
     this.dataInfo();
     this.topDataInfo();
     this.getSelectList('order_type_key').then(res=>{
       this.orderTypeList = res.data;
     })
     this.$nextTick(() => {
         this.tableHeight = this.$refs.index.offsetHeight - this.$refs.moneyTotal.offsetHeight - this.$refs.search.offsetHeight  - this.$refs.page.offsetHeight - 105;
     })
    },
    methods: {
      back(){
          this.$router.go(-1);//返回上一层
      },
      topDataInfo(){
         let data = this.addDateRange(this.searchForm, this.time, 'startTime', 'endTime');
         promotionTransactionItemQuantity(data).then((res)=>{
           this.topData = res.data;
         })
       },
       /** 导出按钮操作 */
       handleExport() {
         this.$modal.confirm('是否确认导出搜索数据项？').then(() => {
           this.btnLoading = true;
            let data = this.addDateRange(this.searchForm, this.time, 'startTime', 'endTime');
           return transactionIncomeExport(data);
         }).then(response => {
           this.$download.name(response.msg);
           this.btnLoading = false;
         }).catch(() => {});
      },
      resetSearch(){
          this.resetForm('searchForm');
          this.time = [];
          this.dataInfo();
          this.topDataInfo();
      },
      handleSearch(){
          this.searchForm.pageNum = 1;
          this.dataInfo();
          this.topDataInfo();
      },
      async dataInfo() {
        try {
          this.loading = true;
           let data = this.addDateRange(this.searchForm, this.time, 'startTime', 'endTime');
          const result = await promotionTransactionItemList(data);
          if (result.code == 200) {
            this.total = result.total;
            this.dataList = result.rows;
          } else {
            this.$message.error(result.msg);
          }
          this.loading = false;
        } catch (err) {
          this.loading = false;
          console.log(err)
        }
      },

    }
  }
</script>

<style scoped lang="scss">
  .head{
    padding: 15px 0;
    margin-bottom:15px;
    border-bottom: 1px solid #ebeef5;
  }
  .el-table .el-dropdown-link{
      cursor: pointer;
      color: #61997A;
      margin-left: 5px;
  }
    .leftDialog{
      height:540px;
      overflow-y: auto;
    }
    .activeVerticalBox .activeItem{
      color:#61997A;
      cursor: pointer;
      margin: 0px;
      text-align: center;
      height:20px;
      line-height: 20px;
    }
    .activeVerticalBox .el-dropdown{
      display: flex;
      justify-content: center;
      color:#61997A;
      cursor: pointer;
    }
    .activeCheckedBox{
      border-top: 1px solid #ddd;
      padding:10px;
      height:52px;
      .el-tag{
        margin-right:10px;
      }
    }
    .rateBox /deep/ .el-rate__icon{
      margin-right: 0px;
    }
    .rateBox>p{
      margin: 0px;
    }
    .rateBox>p> /deep/ .el-rate{
      height:25px;
      line-height:25px;
      display:flex;
    }
    .rateBox>p> /deep/ .el-rate .el-rate__item{
      display:flex;
      align-items: center;
    }
    .rateBox .rateText{
      width:60px;
    }
    .rateBox .content{
      display: flex;
    }
    .rateBox .el-tooltip{
      width: 100px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: inline-block;
    }
</style>
